<template>
    <div class="workTimeSheets">
        <PageTitle class="workTimeSheets__page-title"  >
            <h1> <router-link :to="{ name: 'WorkDashboard' }">Work</router-link> <i class="material-icons">chevron_right</i> Timesheets</h1>
        </PageTitle>
        <div class="workTimeSheets__billable-label">
            <h3>Billable Hours</h3>
        </div>

        <div class="right workTimeSheets__date-block">
            <p class="workTimeSheets__date-title">Week</p>
            <date-picker :date="startTime" :option="option" :limit="limit" v-if="startTime.time"></date-picker>
            <i class="material-icons expand-icon">expand_more</i>
        </div>
        <div class="clearboth"></div>

        <Panel>
            <table class="timesheet-table" v-if="timesheets">
                <thead>
                <tr>
                    <th><input type="checkbox" v-model="toggleState" /></th>
                    <th>Project</th>
                    <th class="border-right">Task</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                    <th>Saturday</th>
                    <th class="border-right">Sunday</th>
                    <th>Total</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in timesheets" :class="{selected:selectedStates[index]}">
                    <td><input v-model="selectedStates[index]" type="checkbox"></td>
                    <td>{{item.project}}</td>
                    <td class="border-right">{{item.task}}</td>
                    <td>{{item.hours.monday}}</td>
                    <td>{{item.hours.tuesday}}</td>
                    <td>{{item.hours.wednesday}}</td>
                    <td>{{item.hours.thursday}}</td>
                    <td>{{item.hours.friday}}</td>
                    <td>{{item.hours.saturday}}</td>
                    <td  class="border-right">{{item.hours.sunday}}</td>
                    <td>36:50</td>
                </tr>
                </tbody>
            </table>
        </Panel>

        <div class="right">
            <div class="btn-group">
                <a class="btn btn--white" v-on:click.prevent="submitSelected()">
                    Submit Selected Entries
                </a>
                <a class="btn" v-on:click.prevent="submitAll()">
                    Submit for Approval
                </a>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import Panel from './Panel.vue'
    import PageTitle from './PageTitle.vue'
    import DatePicker from 'vue-datepicker'
    import dateFormat from 'dateformat'

    export default {
        components:{
            Panel,
            PageTitle,
            DatePicker
        },
        data() {
            return {
                timesheets:null,
                toggleState:false,
                selectedStates:[],
                startTime: {
                    time: null
                },
                option: {
                    type: 'day',
                    week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
                    month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    format: 'DD MMM, YYYY',
                    placeholder: 'when?',
                    inputStyle: {
                        'display': 'inline-block',
                        'padding': '0',
                        'line-height': '22px',
                        'font-size': '14px',
                        'border': '0px solid #fff',
                        'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0)',
                        'border-radius': '2px',
                        'color': '#212121',
                        'background': 'transparent'
                    },
                    color: {
                        header: '#229eda',
                        headerText: '#fff'
                    },
                    buttons: {
                        ok: 'Ok',
                        cancel: 'Cancel'
                    },
                    overlayOpacity: 0.5, // 0.5 as default
                    dismissible: true // as true as default
                },
                timeoption: {
                    type: 'min',
                    week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
                    month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    format: 'YYYY-MM-DD HH:mm'
                },
                multiOption: {
                    type: 'multi-day',
                    week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
                    month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    format:"YYYY-MM-DD HH:mm"
                },
                limit: []
            }
        },
        mounted: function() {
            var self = this;
            axios.get(process.env.API_ROOT + '/timesheets', {
            }).then(function(response) {
                self.timesheets = response.data;
            });

            this.getMonday();

        },
        methods: {
            getMonday:function(){
                var week = dateFormat(this.startTime.time , "N");
                var dateOffset = (24*60*60*1000) * (week-1);
                var startdate = '';
                if (this.startTime.time) {
                    startdate = new Date(this.startTime.time);
                } else {
                    startdate = new Date();
                }
                startdate.setTime(startdate.getTime() - dateOffset);
                this.startTime.time = dateFormat(startdate, 'dd mmm, yyyy');
                console.log(this.startTime);
            },
            submitSelected: function(){
                console.log('submit selected pressed');
                console.log(this.selectedStates);
            },
            submitAll: function(){
                console.log('submit all pressed');
            }
        },
        computed:
            {
                selected:function()
                {
                    return this.timesheets.filter( function(item, index){ return !! this.selectedStates[index]; }.bind(this) );
                }

            },

        watch:
            {
                toggleState:function(state)
                {
                    console.log(state);
                    this.timesheets.forEach( function(item, index){ this.selectedStates[index] = state; }.bind(this) );
                },
                'startTime.time': 'getMonday'
            }
    }
</script>